<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-17 14:22:29
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="./common/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>预警中心</title>
</head>

<body>
  <div class="projectScreen">
    <div class="screenTop">
      <div class="screenTop_left">
        <div class="screenTop_left_top itemBoxContent">
          <div class="itemBox_boxTitle">项目总览</div>
          <div class="allCountBox">
            <div class="itemCountBox bg1">
              <div class="itemCountBox_tips">参与项目数</div>
              <div class="itemCountBox_nums">100</div>
            </div>
            <div class="itemCountBox bg2">
              <div class="itemCountBox_tips">正在进行中项目数</div>
              <div class="itemCountBox_nums">30</div>
            </div>
            <div class="itemCountBox bg3">
              <div class="itemCountBox_tips">已完成项目数</div>
              <div class="itemCountBox_nums">70</div>
            </div>
          </div>
        </div>
        <div class="screenTop_left_bottom">
          <div class="screenTop_left_bottom_left itemBoxContent">
            <div class="itemBox_boxTitle">项目动态</div>
            <div class="projectDynamic">
              <div class="itemDynamic">
                <div class="itemDynamic_date"><i class="bi bi-clock dateIcon"></i>2022-11-20 07:30</div>
                <div class="itemDynamic_text">
                  <div class="itemDynamic_text_content">项目管理系统建设项目<span class="dynamicUpdate">更新了需求</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="screenTop_left_bottom_right itemBoxContent">
            <div class="itemBox_boxTitle">近期待办</div>
            <div class="nearDone" id="nearDone"></div>
          </div>
        </div>
      </div>
      <div class="screenTop_right itemBoxContent">
        <div class="itemBox_boxTitle">项目状态统计</div>
        <div class="rightPie" id="rightPie"></div>
      </div>
    </div>
    <div class="screenBottom itemBoxContent">
      <div class="screenBottom_title">
        <div class="itemBox_boxTitle">近期更新的项目</div>
        <button class="button_primary_text"><i class="bi bi-three-dots"></i></button>
      </div>
      <div class="allUpdateProject">
        <div class="itemUpdatePro">
          <div class="itemUpdatePro_title">
            <div class="pro_title_text"><img src="./common/img/dialogTitle.png" width="20px" height="20px" />基层治理协同协同项目
            </div>
            <div class="pro_title_date">2021-10-20至2022-10-30</div>
          </div>
          <div class="itemUpdatePro_info">
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">商务经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目类型</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">重要程度</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">售前经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目方向</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">紧急程度</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">项目经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目状态</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目阶段</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">时间进度</div>
                <div class="info_item_box_text info_item_box_progress">
                  <div class="progress">
                    <div class="progress_line">
                      <div class="progress_line_inner" style="width: 25%"></div>
                    </div>
                    <div class="progress_text">25%</div>
                  </div>
                </div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">自评进度</div>
                <div class="info_item_box_text info_item_box_progress">
                  <div class="progress">
                    <div class="progress_line">
                      <div class="progress_line_inner" style="width: 25%"></div>
                    </div>
                    <div class="progress_text">25%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="itemUpdatePro">
          <div class="itemUpdatePro_title">
            <div class="pro_title_text"><img src="./common/img/dialogTitle.png" width="20px" height="20px" />基层治理协同协同项目
            </div>
            <div class="pro_title_date">2021-10-20至2022-10-30</div>
          </div>
          <div class="itemUpdatePro_info">
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">商务经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目类型</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">重要程度</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">售前经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目方向</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">紧急程度</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">项目经理</div>
                <div class="info_item_box_text">某某某</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目状态</div>
                <div class="info_item_box_text">软硬件项目</div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">项目阶段</div>
                <div class="info_item_box_text">----</div>
              </div>
            </div>
            <div class="info_item">
              <div class="info_item_box">
                <div class="info_item_box_tip">时间进度</div>
                <div class="info_item_box_text info_item_box_progress">
                  <div class="progress">
                    <div class="progress_line">
                      <div class="progress_line_inner" style="width: 25%"></div>
                    </div>
                    <div class="progress_text">25%</div>
                  </div>
                </div>
              </div>
              <div class="info_item_box">
                <div class="info_item_box_tip">自评进度</div>
                <div class="info_item_box_text info_item_box_progress">
                  <div class="progress">
                    <div class="progress_line">
                      <div class="progress_line_inner" style="width: 25%"></div>
                    </div>
                    <div class="progress_text">25%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  bottomBarChart()// 近期待办
  rightPieChart()// 项目状态统计
  // 近期待办
  function bottomBarChart() {
    let chart = echarts.init(document.getElementById('nearDone'));
    let option = {
      color: ['#3E7BFA', '#00B2FF', '#80E2FF', '#4BDAAC'],
      grid: {
        top: 30,
        right: 20,
        left: 10,
        bottom: 60,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        bottom: '10%',
        left: 'center',
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        textStyle: {
          color: '#4E5969',
          fontSize: 12,
        },
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          color: '#86909C',
          fontSize: 12,
        },
        axisTick: {
          alignWithLabel: true,
          lineStyle: {
            color: '#E5E8EF',
          },
        },
        axisLine: {
          show: false,
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#86909C',
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            color: '#E5E8EF',
          },
        },
      },
      series: [
        {
          name: '需求',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          stack: 'total',
          barWidth: 16
        },
        {
          name: '任务',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          stack: 'total',
          barWidth: 16
        },
        {
          name: 'BUG',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          stack: 'total',
          barWidth: 16
        },
        {
          name: '问题',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          stack: 'total',
          barWidth: 16
        },
      ]
    };
    chart.setOption(option, true);
    chart.resize();
  }
  // 项目状态统计
  function rightPieChart() {
    let chart = echarts.init(document.getElementById('rightPie'));
    let option = {
      color: ['#3E7BFA', '#4BDAAC', '#2CBBF7', '#A38CFF', '#F6AB2A', '#6D9FFF'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '10%',
        left: 'center',
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 15,
        textStyle: {
          color: '#333333',
          fontSize: 12,
          rich: {
            a: {
              width: 85
            },
            b: {
              width: 40
            }
          },
        },
        formatter: function (name) {
          var data = option.series[0].data
          var total = 0
          var tarValue
          for (var i = 0; i < data.length; i++) {
            total += data[i].value
            if (data[i].name == name) {
              tarValue = data[i].value
            }
          }
          var p = tarValue == 0 ? 0 : ((Number(tarValue) / total) * 100).toFixed(0)
          return ` {a|${name}：${tarValue}个} {b|${p}%}`
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '35%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '未开始' },
            { value: 735, name: '审批中' },
            { value: 580, name: '进行中' },
            { value: 484, name: '维保中' },
            { value: 300, name: '已完成' },
            { value: 300, name: '已延期' },
          ]
        }
      ]
    };
    chart.setOption(option, true);
    chart.resize();
  }
</script>

</html>